<template>
  <div class="week-plan-detail-container">
    <!-- 列表 -->
    <el-table :data="list" :stripe="true" :show-overflow-tooltip="true">
      <el-table-column label="编号" align="center" prop="id" width="60" />
      <el-table-column label="功能室" align="center" prop="roomIds">
        <template #default="scope">
          <div class="flex flex-wrap gap-5px m-0-auto">
            <el-tag v-for="item in scope.row.roomIds" :key="item" type="primary">{{
              getRoomName(item)
            }}</el-tag>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="班级" align="center" prop="classIds" :formatter="dateFormatter">
        <template #default="scope">
          <div class="flex flex-wrap gap-5px m-0-auto">
            <el-tag v-for="item in scope.row.classIds" :key="item" type="primary">{{
              getClassName(item)
            }}</el-tag>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        label="更新时间"
        align="center"
        prop="updateTime"
        :formatter="dateFormatter"
        width="160"
      />
      <!-- <el-table-column label="操作" align="center" width="168">
        <template #default>
          <el-button link type="primary"> 查看资料 </el-button>
          <el-button link type="primary"> 上传资料 </el-button>
        </template>
      </el-table-column> -->
    </el-table>
  </div>
</template>

<script lang="ts" setup>
import { dateFormatter } from '@/utils/formatTime'
import { RoomApi } from '@/api/school/room'
import { ClassesApi } from '@/api/school/classes'
const props = defineProps({
  list: {
    type: Array,
    required: true,
    default: () => []
  }
})
const roomList: any = ref([])
const getRoomPage = async () => {
  try {
    const data = await RoomApi.getRoomPage({
      pageNo: 1,
      pageSize: 100
    })
    roomList.value = data.list
  } finally {
  }
}
const classList: any = ref([])

const getClassList = async () => {
  try {
    classList.value = (await ClassesApi.getClassesList()) || []
  } catch (error) {
    console.log(error)
  } finally {
  }
}

const getRoomName = (id) => {
  console.log(id, roomList.value)

  const room = roomList.value.find((item) => item.id === id)
  return room ? room.name : ''
}
const getClassName = (id) => {
  for (const grade of classList.value) {
    if (grade.children && grade.children.length > 0) {
      const clazz = grade.children.find((item) => item.id === id)
      if (clazz) {
        return `${grade.name}/${clazz.name}`
      }
    }
  }
  return ''
}

onMounted(() => {
  getRoomPage()
  getClassList()
})
</script>

<style lang="scss" scoped>
.m-0-auto {
  width: fit-content;
  margin: 0 auto;
}

.week-plan-detail-container {
  width: 100%;
  // max-width: 700px;
  padding: 20px;
  margin: 0 auto;
  overflow: hidden;
  font-family: 'Helvetica Neue', Arial, sans-serif;
  white-space: pre-wrap;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgb(0 0 0 / 5%);
}
</style>
